Skip to content

Conversation

@spencercanner
Copy link

@spencercanner spencercanner commented Nov 12, 2020

  • Add role of img to the line item image div, and add an aria-label
    • These will be conditionally added, if the image has alt text. Otherwise, we'll be showing the default shopping bag image that doesn't need to be announced to screen readers.
  • Add helper function to the cart to get value for the aria-label
    • It will return the line item variant image alt text if it exists, otherwise will return the line item title (product title). If the line item doesn't have an image, it will return null.

To 🎩 :

  • Add a variant to the cart that has an image with alt text
    • Verify that the line item image div has a role of image
    • Verify that the image alt text is the aria-label on line item image div
    • Verify that screenreaders announce the image and the label
  • Add a variant to the cart that does not have alt text
    • Verify that the line item image div has a role of image
    • Verify that the line item / product title is the aria-label on the line item image div
    • Verify that screenreaders announce the image and the label
  • Add a variant to the cart whose product does not have any images
    • Verify that the default shopping bag image appears for the line item
    • Verify that the line item image div does not have a role or aria-label
    • Verify that screenreaders do not announce the image
  • Chrome
  • Safari/Mac - VoiceOver
  • Firefox/Windows - NVDA

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant